<!--
 * @Author: chengxinwei 499449221@qq.com
 * @Date: 2024-10-09 16:00:31
 * @LastEditors: chengxinwei 499449221@qq.com
 * @LastEditTime: 2024-11-05 10:56:51
 * @FilePath: /web/src/components/pieChart/index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div :class="className" :style="{ height: height, width: width }" />
</template>

<script>
import * as echarts from 'echarts';
//   import resize from './mixins/resize';

export default {
	// mixins: [resize],
	props: {
		className: {
			type: String,
			default: 'chart'
		},
		width: {
			type: String,
			default: '100%'
		},
		height: {
			type: String,
			default: '240px'
		},
		autoResize: {
			type: Boolean,
			default: true
		},
		chartData: {
			type: Array,
			required: true
		}
	},
	data() {
		return {
			chart: null
		};
	},
	watch: {
		chartData: {
			deep: true,
			handler(val) {
				this.setOption(val);
			}
		}
	},
	mounted() {
		this.$nextTick(() => {
			this.initChart();
		});
	},
	beforeDestroy() {
		if (this.chart) {
			this.chart.dispose();
			this.chart = null;
		}
	},
	methods: {
		initChart() {
			this.chart = echarts.init(this.$el, 'macarons');
			this.setOption(this.chartData);
		},
		setOption({ expectedData, actualData } = {}) {
			this.chart.setOption({
				color:['#FEC718','#01F7FD','#70B603','#027DB4'],
				tooltip: {
					trigger: 'item'
				},
				legend: {
					top: '2%',
					left: 'center',
					textStyle: { //图例文字的样式
							color: '#fff',
							fontSize: 12
					},
				},
				series: [
					{
						name: '库存数量',
						type: 'pie',
						radius: ['50%', '70%'],
						center: ['50%', '60%'],
						data: this.chartData,
						emphasis: {
							itemStyle: {
								shadowBlur: 10,
								shadowOffsetX: 0,
								shadowColor: 'rgba(0, 0, 0, 0.5)'
							}
						},
						itemStyle: {
							normal: {
								label: {
									textStyle: {
										color: '#FFFFFF',//用这个属性改变字体颜色
										fontWeight:'bold'
									},
								},
							},
						},
					}
				]
			});
		}
	}
};
</script>